<template>
	<div class="mine">
		<!-- 顶部栏 -->
		<div class="top">
			<van-image
				fit="cover"
				radius="50%"
				:src="$store.state.userInfoObj.photo"
			/>
			<div class="user-info">
				<h4>{{ $store.state.userInfoObj.name }}</h4>
				<span>{{ $store.state.userInfoObj.birthday }}</span>
			</div>
		</div>

		<!-- 快捷操作栏 -->
		<van-row>
			<van-col span="8">
				<van-icon color="#3296fa" name="newspaper-o" />
				<div>我的作品</div>
			</van-col>
			<van-col span="8">
				<van-icon color="#f00" name="star-o" />
				<div>我的收藏</div>
			</van-col>
			<van-col span="8">
				<van-icon color="orange" name="tosend" />
				<div>阅读历史</div>
			</van-col>
		</van-row>

		<!-- cell区域 -->
		<van-cell-group>
			<van-cell to="/edit" icon="edit" title="编辑资料" is-link />
			<van-cell to="/mine/chat" icon="chat-o" title="小智同学" is-link />
			<van-cell icon="setting-o" title="系统设置" is-link />
			<van-cell @click="signOut" icon="info-o" title="退出登录" is-link />
		</van-cell-group>
	</div>
</template>

<script>
// import { userInfoAPI } from "@/api/user.js";
export default {
	data() {
		return {
			userInfo: {},
		};
	},
	async created() {
		// const res = await userInfoAPI();
		// this.userInfo = res.data;
		// console.log(res);
		// 调用store里获取用户信息的方法
		this.$store.dispatch("getUserInfo");
	},
	methods: {
		signOut() {
			this.$store.commit("signOut", this.userInfo);
			this.$toast("退出成功");
			this.$router.push("/login");
		},
	},
};
</script>

<style scoped lang="less">
.mine {
	.top {
		@bgc: #3296fa;
		height: 140px;
		background-color: @bgc;
		display: flex;
		align-items: center;

		.van-image {
			width: 100px;
			height: 100px;
			margin-left: 20px;
			margin-right: 10px;
		}
		.user-info {
			color: #fff;
			h4 {
				font-size: 18px;
				margin-bottom: 10px;
			}
			span {
				color: @bgc;
				background-color: #fff;
				padding: 5px;
				font-size: 17px;
			}
		}
	}

	.van-row {
		.van-col {
			height: 80px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.van-icon {
				font-size: 30px;
				margin-bottom: 3px;
			}
		}
	}
}
</style>